<template>
  <div class="home">
   <p>{{num1}}</p>
   <p>{{number}}</p>
   <!-- <p>{{age}}</p> -->
   <button @click="add">++</button>
   <ul>
     <li v-for="(item,index) in list" :key="index">{{item}}</li>
   </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';
export default {
  name: 'Home',
  components: {

  },
  computed:{
    // ...mapState(['num','age']),
    ...mapState({
      num1: state => state.num,
      // num1: function (state) {
      //   return state.num
      // }
      list: state => state.list
    }),
    // ...mapGetters(['bigNum']) // 数组的写法
    ...mapGetters({
      number: 'bigNum'
    })
    // number: function(val){
    //   return val
    // }
  },
  created() {
    // let arr = [1,2,3];
    // let arr1 = [4,5,6];
    // // concat 数组拼接
    // // let arr2 = arr.concat(arr1);
    // console.log(...arr);
    // let arr2 = [...arr,...arr1];
    // console.log(arr2);
    // let obj = {name:'张三'}
    // let obj1 = {age: 18}
    // let obj2 = {...obj,...obj1}
    // console.log(obj2);
    // this.$store.dispatch('getList');
    this.getData();
  },
  methods: {
    // add(){
    //   // this.$store.commit('storeAdd')
    // },
    // ...mapMutations(['storeAdd']), // 数组的写法
    ...mapMutations({
      add: 'storeAdd'
    }),
    // ...mapActions(['getList']) // 数组的写法
    ...mapActions({
      getData: 'getList'
    }) // 对象的写法
  },
}


// 1.let fn = function () {
//   return 10
// }

// 2. let fn = () => {
//   return 10
// }

// 箭头函数的箭头 自带 return 的意思

// 3.let fn = () => 10


// 当箭头函数 只有一个形参的时候，括号可以省略不写

// let fn = function (val) {
//   return val
// }


// let fn = val => val;
// console.log(fn(10));


// let obj = {
//   name: '张三',
//   fn: function (){
//     console.log(this); // this 指向的是 obj
//   }
// }

// let obj = {
//   name: '张三',
//   fn: () => {
//     console.log(this); // 箭头函数不固化this指向
//   }
// }
// obj.fn();



// let fn = function () {
//    console.log(arguments);
// }
let fn = (...val) => {  // 箭头函数里面没有 arguments
   // ...val 剩余参数
}
// git 提交验证
fn(1,2,3,4,5);
</script>
